<template>
	<view  v-if="currentPage === 'invite'"  class="container">
		<nav-header title="链接邀请" custom-nav>
		</nav-header>
		<view class="container-body">
			<view class="warpper">
				<image class="warpper-img" src="https://img2.baidu.com/it/u=1268794162,306109073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
				<view class="comapny-title">友星缘智能科技有限公司
				<view class="comapny-authentication">@已认证</view>
				</view>
			</view>
			<view class="nickName">李四<text class="position">@人事部经理</text></view>
			<view class="message">邀请您加入友星缘智能科技有限公司</view>
			<view class="complete-information">
				<button  @tap="showCompleteInfo" class="custom-button">完善信息后加入</button>	
				<view @click="handleRefuse"> <svg-icon icon="audio" ></svg-icon></view>
			</view>
			<button v-if="refuseButton" @tap="showRefusePage"  class="refuse-button">拒绝加入</button>			
		</view>
	</view>
	
	<view  v-if="currentPage === 'refuse'" class="container">
		<nav-header title="拒绝加入原因" custom-nav>
			<template v-slot:left>
			<view class="icon-text"@tap="backToInvite()">
				<uni-icons type="back"  size="28">
				</uni-icons>
				<text  style="color: blue; font-size:18px">返回</text>
			</view>		
			</template>
		</nav-header>
		<view class="container-refuse">
			<view style="margin-bottom: 20rpx;">请填写拒绝原因：</view>
			<up-textarea v-model="value1" placeholder="请输入内容" ></up-textarea>
			<button class="submit">提交</button>
		</view>
	</view>
	
	<!-- 同意页面 -->
	<view  v-if="currentPage === 'completeInfo'" class="container">
		<nav-header title="完善信息" custom-nav>
			<template v-slot:left>	
			<view class="icon-text"@tap="backToInvite()">
				<uni-icons type="back"  size="28">
				</uni-icons>
				<text  style="color: blue; font-size:18px">返回</text>
			</view>		
			</template>
		</nav-header>		
		 <uni-forms label-position="top" ref="form" :model="formData">
			<view class="info">基本信息</view>
		    <uni-forms-item label="姓名" name="name">
		      <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
		    </uni-forms-item>
		    <uni-forms-item label="部门" name="department">
		      <uni-easyinput type="text" v-model="formData.department" placeholder="请输入部门" />
		    </uni-forms-item>
		    <uni-forms-item label="直属主管" name="supervisor">
		      <uni-easyinput type="text" v-model="formData.supervisor" placeholder="请输入直属主管" />
		    </uni-forms-item>
		    <uni-forms-item label="职位" name="position">
		      <uni-easyinput type="text" v-model="formData.position" placeholder="请输入职位" />
		    </uni-forms-item>
		    <uni-forms-item label="入职时间" name="entryDate">
		      <!-- <uni-datetime-picker type="datetime" v-model="formData.entryDate" /> -->
			  禁止使用uni默认组件
		    </uni-forms-item>
			<view class="info">个人信息</view>
		    <uni-forms-item label="身份证姓名" name="idName" label-width="180rpx">
		      <uni-easyinput type="text" v-model="formData.idName" placeholder="请输入身份证姓名" />
		    </uni-forms-item>
		    <uni-forms-item label="证件号码" name="idNumber">
		      <uni-easyinput type="text" v-model="formData.idNumber" placeholder="请输入证件号码" />
		    </uni-forms-item>
		    <uni-forms-item label="出生日期" name="birthDate">
		      <!-- <uni-datetime-picker type="datetime" v-model="formData.birthDate" /> -->
			  禁止使用uni默认组件
		    </uni-forms-item>
		    <uni-forms-item label="性别" required>
			       <radio-group class="uni-flex uni-row radio-group" @change="radioChange" style="flex-wrap: wrap">
			           <radio id="trigger-change" value="1" :checked="formData.gender === '1'" :color="color" style="margin-right: 15px" class="radio r">男</radio>
			           <radio value="2" :checked="formData.gender === '2'" style="margin-right: 15px" class="radio r1">女</radio>
			         </radio-group>
		    </uni-forms-item>
			
		  </uni-forms>
		<view class="footer"><button class="submit" @tap="submitForm">确认无误，同意申请</button></view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const currentPage = ref('invite');
	
	const refuseButton = ref(false)
	// 定义事件处理函数
	const handleRefuse = () => {
	  refuseButton.value = !refuseButton.value
	};
	// 定义事件处理函数
	const showCompleteInfo = () => {
	  currentPage.value = 'completeInfo';
	};
	
	const showRefusePage = () => {
	  currentPage.value = 'refuse';
	};
	
	const backToInvite = () => {
	  currentPage.value = 'invite';
	   refuseButton.value = false
	};
	// 假数据
	const formData = ref({
	  id:'',	
	  name: '',
	  department: '',
	  supervisor: '',
	  position: '',
	  entryDate: '',
	  idName: '',
	  idNumber: '',
	  birthDate: '',
	  gender: '1'
	});	
</script>

<style lang="scss" scoped>
	.container{
		margin: 20rpx;
		 height: 100vh;
		.container-body{
			margin: 20rpx;
			
			.warpper{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.warpper-img{
					height: 200rpx;
					width: 200rpx;
				}
				.comapny-title{
					font-size: 40rpx;
					color: #333333;
					font-weight: bold;
					.comapny-authentication{
						margin-top: 10rpx;
						font-size: 25rpx;
						font-weight: normal;
						color: #FFD15A;
					}
				}
			}
			.nickName{
				margin-top: 20rpx;
				font-size: 33rpx;
			}
			.position{
				margin-left: 10rpx;
				font-size: 30rpx;
				color: #555555;
			}
			.message{
				margin-top: 10rpx;
			}
			.complete-information{
				
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
				.custom-button{
					background-color: #1989FA; /* 修改背景色为蓝色 */
					color: white; /* 文字颜色为白色 */
					border: none; /* 去掉边框 */
					font-size: 16px; /* 字体大小 */
					cursor: pointer; /* 鼠标悬停时显示指针 */
					width: 800rpx;
				}
			}
		.refuse-button{
			margin-left: 480rpx;
			margin-top: 20rpx;
			width: 200rpx;
			
		}
		}
		// 拒绝页面样式
		.container-refuse{
			
			.submit{
				margin-top: 30rpx;
				background-color: #1989FA; /* 修改背景色为蓝色 */
				color: white; /* 文字颜色为白色 */
				border: none; /* 去掉边框 */
				font-size: 16px; /* 字体大小 */
				cursor: pointer; /* 鼠标悬停时显示指针 */
			}
			
		}
		.icon-text{
		 display: flex;
		 /* gap: 3px; */
		 align-items: center;
		 justify-items: center;
	 }
	 .footer{
		 padding-bottom: 30rpx;
		 .submit{
		 	margin-top: 30rpx;
		 	background-color: #1989FA; /* 修改背景色为蓝色 */
		 	color: white; /* 文字颜色为白色 */
		 	border: none; /* 去掉边框 */
		 	font-size: 16px; /* 字体大小 */
		 	cursor: pointer; /* 鼠标悬停时显示指针 */
		 	margin-bottom: 30rpx;
		  }
	 }

	 :deep(.uni-forms-item__label){
		 color: black;
	 }
	}     
</style>
